<template>
  <div class="content">
    <!-- 全屏容器 -->
    <!-- <dv-full-screen-container> -->
    <!-- 第一行 -->
    <div style="display:flex;justify-content:space-between; ">
      <div style="flex:0 1 25%;">
        <div style="width: 100%;display:flex;align-items: center;justify-content: center;margin-top: 48px;">
          <el-radio-group v-model="isCollapse" size="medium">
            <el-radio-button label="0">安责险概览</el-radio-button>
            <el-radio-button label="1">风控分析</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div style="flex:0 1 50%;">
        <div style="display:flex;align-items: center;justify-content: center;margin-top: 12px;">
          <dv-decoration-8 style=" width:70%;height:50px;margin-top: 12px;" />
          <dv-decoration-11 style="width:100%;height:60px;margin-top: 12px; font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif; 
            font-weight: 700;
            font-style: normal;
            color: #ffffff;
            font-size: 22px;">宁波安责险监督管理中心</dv-decoration-11>
          <!-- <div style="flex:0 1 40%;
            text-align: center;
            font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif; 
            font-weight: 700;
            font-style: normal;
            font-size: 36px;
            color: #F2F2F2;
            margin-top: 24px;">
          宁波安责险监督管理中心
        </div> -->
          <dv-decoration-8 :reverse="true" style="width:70%;height:50px;margin-top: 12px;" />
        </div>

      </div>
      <div style="flex:0 1 25%;">
        <div style="display: flex;align-items: center;justify-content: center;color: #409EFF;
                font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
                font-weight: 700;
                font-style: normal;
                font-size: 18px;
                margin-top: 48px;">{{ date | formatDateTime }}</div>
      </div>
    </div>
    <template>
      <div v-if="isCollapse == '0'">
        <!-- 安责险概览 -->
        <insurance></insurance>
      </div>
      <div v-else>
        <!-- 风控分析 -->
        <analysis></analysis>
      </div>
    </template>


    <!-- </dv-full-screen-container> -->
  </div>
</template>

<script>
import analysis from './components/analysis/index.vue'
import insurance from './components/insurance/index.vue'
export default {
  name: 'HomeView',
  data() {
    return {
      //时间显示
      date: new Date(),
      // 切换按钮
      isCollapse: 0,
    }
  },
  mounted() {
    var that = this;
    this.timer = setInterval(() => {
      that.date = new Date(); //修改数据date
    }, 1000);
  },
  filters: {
    formatDateTime(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "年" + MM + "月" + d + "日" + h + ":" + m + ":" + s;
    }
  },
  components: { insurance, analysis }
}
</script>
